<script setup lang="ts">
import {queryTree, editMenu} from "@/api/permission/permission"
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";

//定义事件
const emit = defineEmits(["close", "refresh"]);
//定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  }
});

//关闭 方法
function cls() {
  //抛出关闭事件 通知父组件  我要关闭
  emit("close");
}

//上级菜单
const data = ref([]);
const defaultProps = {
  children: "children",
  label: "menuName",
  value: "id"
};

//初始化上级菜单树
async function initTree() {
  let res = await queryTree();
  if (res.code == 200) {
    data.value = res.data;
  }
}

//菜单数据
const menu = ref({
  category: 1,
  menuName: "",
  icon: "",
  path: "",
  sorts: 1,
  name: "",
  component: "",
  auth: "",
  showLink: 1,
  parentId: 0,
  status: 1
});

function chg(v) {
  if (v == 1) {
    menu.value.parentId = 0;
  } else {
    menu.value.parentId = "";
  }
}
//初始方法
function init(data){
  menu.value=data;
}
async function edit() {
  let rs = await editMenu(menu.value);
  if (rs.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    //通知父组件刷新数据
    emit("refresh");
    cls();
  }
}

onMounted(() => {
  initTree();
})
//暴漏方法
defineExpose({init});
</script>

<template>
  <div>
    <el-dialog
      :model-value="visible"
      title="新增菜单"
      width="500"
      @close="cls"
    >
      <el-form label-width="120px" :model="menu" ref="formRef">
        <el-form-item label="菜单类型: &nbsp;&nbsp;">
          <el-radio-group v-model="menu.category" @change="chg">
            <el-radio :value="1">一级菜单</el-radio>
            <el-radio :value="2">二级菜单</el-radio>
            <el-radio :value="3">三级菜单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称: &nbsp;&nbsp;">
          <el-input v-model="menu.menuName" placeholder="请输入菜单名称"/>
        </el-form-item>
        <el-form-item label="菜单图标: &nbsp;&nbsp;" v-show="menu.category != 3">
          <el-input v-model="menu.icon" placeholder="请输入菜单图标"/>
        </el-form-item>
        <el-form-item label="菜单路径: &nbsp;&nbsp;" v-show="menu.category != 3">
          <el-input v-model="menu.path" placeholder="请输入菜单路径"/>
        </el-form-item>
        <el-form-item label="路由名称: &nbsp;&nbsp;" v-show="menu.category == 2">
          <el-input v-model="menu.name" placeholder="请输入路由名称"/>
        </el-form-item>
        <el-form-item label="组件路径: &nbsp;&nbsp;" v-show="menu.category == 2">
          <el-input
            v-model="menu.component"
            placeholder="请输入组件路径如: @/views/..."
          ></el-input>
        </el-form-item>
        <el-form-item label="权限标识: &nbsp;&nbsp;" v-show="menu.category==3">
          <el-input
            v-model="menu.auth"
            placeholder="请输入权限标识如: sys:user:save "
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示: &nbsp;&nbsp;" v-show="menu.category == 2">
          <el-radio-group v-model="menu.showLink">
            <el-radio :value="1">是</el-radio>
            <el-radio :value="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="上级菜单"
          v-show="menu.category != 1"
          prop="parentId"
        >
          <el-tree-select
            v-model="menu.parentId"
            :data="data"
            check-strictly
            :render-after-expand="false"
            :props="defaultProps"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="排序: &nbsp;&nbsp;" v-show="menu.category!=3">
          <el-input-number v-model="menu.sorts" :min="0"/>
        </el-form-item>
        <el-form-item label="状态: &nbsp;&nbsp;">
          <el-radio-group v-model="menu.status">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cls">取消</el-button>
          <el-button type="primary" @click="edit">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>
